<template>
  <div>
    <basePage>
      <el-card>
        <el-row class="diy-row" :gutter="14">
          <el-col :span="2">
            <el-button type="primary" @click="showCreateDialog">添加字典</el-button>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="请输入内容" v-model="query"
              ><el-button slot="append" icon="el-icon-search"></el-button
            ></el-input>
          </el-col>
        </el-row>
        <el-table :data="dictList" border height="600">
          <el-table-column label="ID" prop="id" width="50"></el-table-column>
          <el-table-column label="字典名称" prop="dict_name" width="200"></el-table-column>
          <el-table-column label="字典值" prop="dict_value" width="200"></el-table-column>
          <el-table-column label="字典类型" prop="dict_label" width="120"></el-table-column>
          <el-table-column label="字典描述" prop="desc"></el-table-column>
          <el-table-column label="状态" prop="status" width="80">
            <template scope="scope">
              <el-switch v-model="scope.row.status" active-color="#ff4949"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="showEditDialog(scope.row.id)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="removeDict(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dictDialogVisible"
        width="30%"
        @close="closeDialog"
      >
        <el-form :model="dictInfo" :rules="dictInfoRules" ref="dictInfoRef" label-width="100px">
          <el-form-item label="字典名称" prop="dict_name">
            <el-input v-model="dictInfo.dict_name" placeholder="请输入字典名称"></el-input>
          </el-form-item>
          <el-form-item label="字典值" prop="dict_value">
            <el-input v-model="dictInfo.dict_value" placeholder="请输入字典值"></el-input>
          </el-form-item>
          <el-form-item label="字典类型" prop="dict_label">
            <el-input v-model="dictInfo.dict_label" placeholder="请输入字典类型"></el-input>
          </el-form-item>
          <el-form-item label="字典描述" prop="desc">
            <el-input v-model="dictInfo.desc" placeholder="请输入字典描述"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dictDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="createOrEditDict">确 定</el-button>
        </span>
      </el-dialog>
    </basePage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dictList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      dictDialogVisible: false,
      dialogTitle: '',
      createDict: null,
      dictInfoRules: {
        dict_name: [
          {
            required: true,
            message: '请输入字典名称',
            trigger: 'blur'
          }
        ],
        dict_value: [
          {
            required: true,
            message: '请输入字典值',
            trigger: 'blur'
          }
        ],
        dict_label: [
          {
            required: true,
            message: '请输入字典类型',
            trigger: 'blur'
          }
        ]
      },
      dictInfo: {},
      query: ''
    }
  },
  created() {
    this.getDictList()
  },
  methods: {
    // 获取字典列表
    getDictList() {
      this.$http
        .get(`/core/dict/list?pageSize=${this.pageSize}&pageNum=${this.pageNum}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.dictList = resData.data.list
            this.total = resData.data.count
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 显示添加字典dialog
    showCreateDialog() {
      this.dialogTitle = '添加字典'
      this.createDict = true
      this.dictDialogVisible = true
    },
    // 显示编辑字典dialog
    showEditDialog(id) {
      this.dialogTitle = '编辑字典'
      this.createDict = false
      this.dictDialogVisible = true
      this.$http
        .get(`core/dict/getById?id=${id}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.dictInfo = resData.data[0]
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 添加/编辑字典
    createOrEditDict() {
      // 添加字典的
      if (this.createDict) {
        this.$refs.dictInfoRef.validate(valid => {
          if (valid) {
            this.$http
              .post('core/dict/create', this.dictInfo)
              .then(res => {
                const resData = res.data
                if (resData.code === 200) {
                  this.dictDialogVisible = false
                  this.getDictList()
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
              })
              .catch(err => {
                return this.$message.error(err)
              })
          }
        })
      } else {
        // 编辑字典
        this.$refs.dictInfoRef.validate(valid => {
          if (valid) {
            this.$http
              .post('core/dict/update', this.dictInfo)
              .then(res => {
                const resData = res.data
                if (resData.code === 200) {
                  this.dictDialogVisible = false
                  this.getDictList()
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
              })
              .catch(err => {
                return this.$message.error(err)
              })
          }
        })
      }
    },
    // 删除字典
    removeDict(id) {
      this.$confirm('此操作将永久删除该字典, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .get(`core/dict/delete?id=${id}`)
            .then(res => {
              const resData = res.data
              if (resData.code === 200) {
                this.getDictList()
                this.$message.success(resData.msg)
              } else {
                return this.$message.error(resData.msg)
              }
            })
            .catch(err => {
              return this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    closeDialog() {
      this.$refs.dictInfoRef.resetFields()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getDictList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getDictList()
    }
  }
}
</script>

<style lang="less" scoped>
@import './Dict.less';
</style>
